<template>
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="backText"></block>
			<block slot="content">区域管理</block>
		</cu-custom>
		<view class="bg-white">
			<view class="space-between padding align-center" v-if="member">
				<view class="flex flex-start align-center">
					<view class="cu-avatar xl round default-bg">
						<image :src="member.head_portrait" mode="aspectFill"></image>
					</view>
					<view class="margin-left-sm">
						<view class="flex-start align-center">
							<text class=" text-lg">{{member.nickname}}</text>
						</view>
						<text class="cu-tag sm margin-top-xs ">
							{{member.province?member.province.title:''}} {{member.city?member.city.title:''}} - {{member.level.name}}
						</text>
					</view>
				</view>
			</view>
		</view>
		<view class="grid col-2 margin-sm statview">
			<view class=" padding-xs ">
				<view class="bg-red padding-sm space-between radius overflow">
					<view class="cuIcon cuIcon-group lg minw"></view>
					<view class="w100">
						<view class="text-xl">区域团队</view>
						<view class="">总人数：{{detail?detail.total:0}}</view>
						<view class="margin-top-xs cu-btn line-white sm text-right round " @tap="goPage('/pages/channel/region/member')">查看详情</view>
					</view>
				</view>
			</view>
			<view class=" padding-xs ">
				<view class="bg-orange padding-sm space-between radius overflow">
					<view class="cuIcon cuIcon-rank lg minw"></view>
					<view class="w100">
						<view class="text-xl">区域业绩</view>
						<view class="">总业绩：{{detail?detail.achiement_total:0}}</view>
						<view class="margin-top-xs cu-btn line-white sm text-right round " @tap="goPage('/pages/channel/region/achievement')">查看详情</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bg-white">
			<view class="cu-bar ">
				<view class="action">
					<text>业绩统计</text>
				</view>
			</view>
			<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
			 :style="{'width':cWidth+'px','height':cHeight+'px'}" disable-scroll=true @touchstart="touchLineA" @touchmove="moveLineA"
			 @touchend="touchEndLineA"></canvas>
		</view>

		<view class="bg-white margin-top grid col-2 padding-sm">
			<view class="padding-xs">
				<view class="bg-gray padding-sm" @tap="goPage('/pages/channel/region/member?time_type=today')">
					<view class="text-xxl">{{detail?detail.count_today:'0'}}</view>
					<view class="">今日新增人数</view>
				</view>
			</view>
			<view class="padding-xs">
				<view class="bg-gray padding-sm" @tap="goPage('/pages/channel/region/achievement?time_type=today')">
					<view class="text-xxl">{{detail?detail.achievement_today:0}}</view>
					<view class="">今日业绩</view>
				</view>
			</view>
			<view class="padding-xs">
				<view class="bg-gray padding-sm"  @tap="goPage('/pages/channel/region/member?time_type=thisWeek')">
					<view class="text-xxl">{{detail?detail.count_week:0}}</view>
					<view class="">本周新增人数</view>
				</view>
			</view>
			<view class="padding-xs">
				<view class="bg-gray padding-sm" @tap="goPage('/pages/channel/region/achievement?time_type=thisWeek')">
					<view class="text-xxl">{{detail?detail.achievement_week:0}}</view>
					<view class="">本周业绩</view>
				</view>
			</view>
			<view class="padding-xs">
				<view class="bg-gray padding-sm" @tap="goPage('/pages/channel/region/member?time_type=thisMonth')">
					<view class="text-xxl">{{detail?detail.count_month:0}}</view>
					<view class="">本月新增人数</view>
				</view>
			</view>
			<view class="padding-xs">
				<view class="bg-gray padding-sm" @tap="goPage('/pages/channel/region/achievement?time_type=thisMonth')">
					<view class="text-xxl">{{detail?detail.achievement_month:0}}</view>
					<view class="">本月业绩</view>
				</view>
			</view>
			<view class="padding-xs">
				<view class="bg-gray padding-sm" @tap="goPage('/pages/channel/region/member?time_type=thisYear')">
					<view class="text-xl">{{detail?detail.count_year:0}}</view>
					<view class="">本年新增人数</view>
				</view>
			</view>
			<view class="padding-xs">
				<view class="bg-gray padding-sm" @tap="goPage('/pages/channel/region/achievement?time_type=thisYear')">
					<view class="text-xxl">{{detail?detail.achievement_year:0}}</view>
					<view class="">本年业绩</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '../../../components/u-charts/u-charts.js';
	var _self;
	var canvasObj = {};

	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				cWidth2: '', //横屏图表
				cHeight2: '', //横屏图表
				cWidth3: '', //圆弧进度图
				cHeight3: '', //圆弧进度图
				arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致
				gaugeWidth: '', //仪表盘宽度,此设置可使各端宽度一致
				tips: '',
				pixelRatio: 1,
				serverData: '',
				itemCount: 30, //x轴单屏数据密度
				sliderMax: 50,
				member: null,
				detail: null,
			}
		},
		onLoad() {
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.cWidth2 = uni.upx2px(700);
			this.cHeight2 = uni.upx2px(1100);
			this.cWidth3 = uni.upx2px(250);
			this.cHeight3 = uni.upx2px(250);
			this.arcbarWidth = uni.upx2px(24);
			this.gaugeWidth = uni.upx2px(30);

			this.$common.getMember().then((member) => {
				this.member = member
			})
			//this.fillData(Data);
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				uni.showLoading({
					title: "正在加载数据..."
				})
				this.$http
					.get('channel_region_index')
					.then((response) => {
						this.detail = response.data.data
						uni.hideLoading()
						console.log(response)
						this.showLineA('canvasLineA', this.detail.achiement_uchat)
					})
					.catch((response) => {
						uni.hideLoading()
						console.log(response)
					})

			},
			showLineA(canvasId, chartData) {
				canvasObj[canvasId] = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					padding: [15, 15, 0, 15],
					legend: {
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 5,
					},
					dataLabel: false,
					dataPointShape: false,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: false,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						disableGrid: false,
						type: 'grid',
						gridType: 'dash',
						itemCount: 4,
						scrollShow: true,
						scrollAlign: 'left',
						//scrollBackgroundColor:'#F7F7FF',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条背景颜色,默认为 #EFEBEF
						//scrollColor:'#DEE7F7',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条颜色,默认为 #A6A6A6
					},
					yAxis: {
						//disabled:true
						gridType: 'dash',
						splitNumber: 8,
						min: 10,
						max: 180,
						format: (val) => {
							return val.toFixed(0) + '元'
						} //如不写此方法，Y轴刻度默认保留两位小数
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: true,
					dataPointShape: true,
					extra: {
						lineStyle: 'straight'
					},
				});

			},
			touchLineA(e) {
				canvasObj['canvasLineA'].scrollStart(e);
			},
			moveLineA(e) {
				canvasObj['canvasLineA'].scroll(e);
			},
			touchEndLineA(e) {
				canvasObj['canvasLineA'].scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvasObj['canvasLineA'].showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
		},
	}
</script>

<style>
	.statview .minw {
		width: 70rpx;
		min-width: 70rpx;
	}
</style>
